<template>
  <view>
    <view class="bg-white" v-if="!addAddressInfoShow">

      <!-- 头部导航栏 -->
      <view class="top-navigate bg-white" style="padding: 53px 10px 10px 10px;" @click="goPickSend">
        <view class="content cuIcon-back text-xl top-navigate-title"></view>
        <view class="text-xl top-navigate-title">地址管理</view>
      </view>
      <!-- 我的收货地址列表 -->
      <view class="cu-list menu-avatar">
        <view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in addressList"
          :key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
          :data-target="'move-box-' + index">
          <view class="cu-item-address">
            <view class="text-cut text-black">
              {{item.address_name + item.address_detail}}
            </view>
            <view class="text-gray text-sm flex">
              <view style="margin-right:10px;">{{item.user_name}}</view>
              <view class="">{{item.user_phone}}</view>
            </view>
          </view>

          <view class="move">
            <view class="bg-green" @click="editAddressInfo(item)">编辑</view>
            <view class="bg-red" @click="deleteAddressInfo(item)">删除</view>
          </view>
        </view>
      </view>

      <!-- 新增地址 -->
      <view class="add-address">
        <view class="content cuIcon-add text-orange text-lg" @click="addAddressInfo">
          新增地址
        </view>
      </view>
    </view>
    <add-address-info :addressMsg="addressItemInfo" v-else></add-address-info>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "my-address",
    data() {
      return {
        addAddressInfoShow: false,
        modalName: null,
        listTouchStart: 0,
        listTouchDirection: null,
        //保存编辑地址对应信息
        addressItemInfo:{}
      };
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress', 'updateAddressList']),
      //返回详情页
      goPickSend() {
        this.$parent.addressEditShow = false
      },
      // 获取数据库地址列表数据
      async getAddressList() {
        const db = uniCloud.database();
        const {
          result: getAddressListInfo
        } = await db.collection("my_address").where({user_id:this.userinfo._id}).get();
        this.updateAddressList(getAddressListInfo.data)
      },
      //新增地址
      addAddressInfo() {
        this.addressItemInfo={}
        console.log('add')
        this.addAddressInfoShow = true
      },
      //删除地址信息
      async deleteAddressInfo(item){
        const db = uniCloud.database();
        const {result:res} = await db.collection("my_address").where({_id:item._id}).remove();
        if(res.deleted===1){
          this.getAddressList()
          uni.$showMsg('删除地址成功！')
        }else{
          uni.$showMsg('删除地址失败！')
        }
        console.log(res);
      },
      //修改地址信息
      editAddressInfo(item){
        this.addressItemInfo=item
        this.addAddressInfoShow = true
        console.log('edit',item);
      },
      // ListTouch触摸开始，获取触摸点距盒子左侧的距离
      ListTouchStart(e) {
        this.listTouchStart = e.touches[0].pageX
      },
      // ListTouch计算方向，
      ListTouchMove(e) {
        this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
      },
      // ListTouch计算滚动
      ListTouchEnd(e) { 
        if (this.listTouchDirection == 'left') {
          this.modalName = e.currentTarget.dataset.target
        } else {
          this.modalName = null
        }
        this.listTouchDirection = null
      }
    },
    computed: {
      ...mapState('m_user', ['address', 'addressList','userinfo']),
    },
    created() {
      this.getAddressList()
      console.log(111);
    }
  }
</script>

<style lang="scss">
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }
  }

  .cu-item-address {
    width: 95%;
    line-height: 1.6em;
  }

  .add-address {
    position: absolute;
    bottom: 65px;
    background-color: #ffffff;
    padding: 1rpx 30rpx;
    display: flex;
    align-items: center;
    min-height: 100rpx;
    justify-content: center;
    width: 100%;
  }
</style>